<template>
  <div class="section-two">
    <!-- <div class="border-row"></div>
    <div class="border-col"></div> -->
    
    <div class="section-header-two">同比增长</div>
    <div id="charts" ref="charts" :style="chartsDom" v-show="jz"></div>
    <div class="container_jz" :style="chartsDom" v-if="!jz">
              <div class="circle_jz"></div>
              <div class="circle_jz"></div>
              <div class="circle_jz"></div>
            </div>
    <div class="no-data" ></div>
  </div>
</template>
<script>
import { get_TalentMonitor_TongBiIncrease } from '@/api/data'
export default {
  data() {
    return {
      chartData: {},
      jz:false
    }
  },
  props: ['height','dateProp'],
  computed: {
    chartsDom() {
      return {
        width: (document.documentElement.clientWidth-30)/4 - 15 - 10 + 'px',
        height: this.height - 30 - 10 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
    },
    xAxisData() {
      return this.chartData && this.chartData.difference.map(v=>v.name) || []
    },
    yaxisData01() {
      return this.chartData.thismonth
    },
    yaxisData02() {
      return this.chartData.lastmonth
    },
    yaxisData03() {
      return this.chartData && this.chartData.difference.map(v=>v.value.split('%')[0]) || []
    }
  },
  mounted() {
    this.$nextTick(_=>{
      this.init();
    })
  },
  methods: {
    init() {
      this.jz=false
      get_TalentMonitor_TongBiIncrease(this.dateProp)
      .then(({data:{data}})=>{
        if(data) {
          this.chartData = data;
          this.$nextTick(_=>{
            this.jz=true
            this.chartInit();
          })
        }else{
          this.chartData = null;
        }
      })
    },
    chartInit() {
      let option = {
        grid: {
          top: 50,
          bottom: 20,
          left: 50,
          right: 40
        },
        legend: {
                orient: 'horizontal',
                left: 'center',
                data:['增长比','本期','往期'],
                textStyle: {
                    color: '#fff'
                }
            },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'cross',
              label: {
                  backgroundColor: '#283b56'
              }
          }
        },
        xAxis: {
            type: 'category',
            data: this.xAxisData,
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)',
              }
            }
        },
        yAxis: [{
            type: 'value',
            name: '当月',
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)',
              }
            }
        },{
            type: 'value',
            name: '同比',
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)',
              }
            }
        }],
        series: [{
            data: this.yaxisData01,
            type: 'bar',
            name:'本期',
            itemStyle: {
              barBorderRadius: [15,15,0,0],
              color:  new this.$echarts.graphic.LinearGradient(
                          0, 1, 0, 0,
                          [
                              {offset: 0, color: '#2a8ad0'},                   //柱图渐变色
                              {offset: 1, color: '#3af3ce'},                   //柱图渐变色
                          ]
                      )
            },
            barWidth: 15,
            yAxisIndex: 0
        },{
            data: this.yaxisData02,
            type: 'bar',
            name:'往期',
            itemStyle: {
              barBorderRadius: [15,15,0,0],
              color:  new this.$echarts.graphic.LinearGradient(
                          0, 1, 0, 0,
                          [
                              {offset: 0, color: '#795bd0'},                   //柱图渐变色
                              {offset: 1, color: '#4c7ef0'},                   //柱图渐变色
                          ]
                      )
            },
            barWidth: 15,
            yAxisIndex: 0
        },{
            data: this.yaxisData03,
            type: 'line',
             name:'增长比',
            color: '#38bfb7',
            yAxisIndex: 1,
        }]
      };
      let chartsInit = this.$echarts.init(this.$refs.charts);
      chartsInit.setOption(option);
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
</style>